<ti-select id="select-template" class="w-64" [options]="options" [(ngModel)]="value">
  <ng-template #placeholder>
    <ti-icon class="placehoder" name="location"></ti-icon>
    <span class="placehoder pr-2 pl-2">请选择餐品</span>
  </ng-template>
  <ng-template #selected let-item>
    <span>{{ item.label }}</span>
    <img class="w-4 h-4 mx-1 inline-block align-middle" src="{{ item.url }}" />
    <span>{{ item.englishname }}</span>
  </ng-template>
  <ng-template #item let-item>
    <img class="w-5 h-5 inline-block align-middle" src="{{ item.url }}" />
    <span class="pr-2 pl-2">{{ item.label }}</span>
    <span>{{ item.englishname }}</span>
  </ng-template>
  <ng-template #footer>
    <div class="footer relative p-4">
      <ti-icon class="mr-1 text-x1 align-bottom" name="add1"></ti-icon><span class="gap">自定义footer区域</span>
    </div>
  </ng-template>
</ti-select>

<div class="current-value-container">
  <pre>Current Select: {{ value | json }}</pre>
</div>
